<template>
    <div class="vbus">
        <h2>全局事件总线</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            实现组件间通信。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">说明</el-tag>
        <p class="decr">
            全局事件总线不是Vue自带的什么api，而是开发过程中， 由开发人员自身总结的一套组件间通信的方法。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">操作方法</el-tag>
        <p class="decr">
            1. 在main.js中，在初始化前，把$bus挂载到Vue原型上，让所有组件都能使用$bus。<br>
            2. 通过$bus完成自定义事件。<br>
            3. 通过$bus触发自定义事件。<br>
            4. 通过$bus解绑自定义事件。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            本案例中，来实现兄弟间组件通信：<br>
            1. 在main.js中，挂载全局事件总线。（可在/src/main.js中查看）<br>
            2. 在VbusSon1组件中，创建自定义事件receive-msg。<br>
            3. 在VbusSon2组件中，添加触发和解绑事件。<br>
        </p>
        <p class="decr">
            <VbusSon1></VbusSon1>
            <VbusSon2></VbusSon2>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VbusSon1 from './VbusSon1';
import VbusSon2 from './VbusSon2';

export default {
    name: 'Vbus',
    mixins: [mixinPage],
    components: {VbusSon1, VbusSon2}
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>